<template>
  <section class="py-20 md:py-32 bg-white" aria-labelledby="hero-heading">
    <div class="container mx-auto px-4 flex flex-col items-center text-center">
      <h1 id="hero-heading" class="text-4xl md:text-6xl font-bold text-zinc-900 mb-6">
        Copy Any UI with Pixel-Perfect Accuracy
      </h1>

      <div class="max-w-3xl">
        <p class="text-lg md:text-xl text-zinc-600 mb-4">
          Transform your development workflow with our advanced UI cloning technology. Create
          <strong>pixel-perfect replicas</strong> of any website interface instantly.
        </p>
        <p class="text-lg md:text-xl text-zinc-600 mb-12">
          Simply enter a URL and let our AI do the work. Save hours of development time with
          <span class="text-emerald-600">CopyAnyUI.org</span>.
        </p>
      </div>

      <form class="relative w-full max-w-3xl mx-auto" @submit.prevent="handleSubmit">
        <div class="relative flex items-center">
          <label for="url-input" class="sr-only">Enter website URL</label>
          <input
            id="url-input"
            v-model="urlInput"
            type="url"
            placeholder="Enter website URL to create a pixel-perfect clone..."
            class="w-full h-12 px-4 pr-32 text-sm border border-zinc-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
          />
          <button
            class="absolute right-1.5 h-11 px-4 bg-zinc-900 text-white text-sm font-medium rounded-md hover:bg-zinc-800 transition-colors flex items-center gap-2"
            type="submit"
            aria-label="Clone UI from the provided URL"
          >
            Copy Any UI
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5 12h14m-7-7l7 7-7 7"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>

        <div class="mt-3 text-xs text-zinc-500 text-center">
          Try with:
          <button
            type="button"
            class="text-emerald-600 hover:underline ml-1"
            @click="setExample('github.com')"
          >
            github.com
          </button>
          |
          <button
            type="button"
            class="text-emerald-600 hover:underline ml-1"
            @click="setExample('tailwindcss.com')"
          >
            tailwindcss.com
          </button>
        </div>
      </form>

      <div class="mt-8 flex flex-wrap justify-center gap-4 text-sm text-zinc-500">
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4 text-emerald-600" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
          No coding required
        </span>
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4 text-emerald-600" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
          Production-ready code
        </span>
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4 text-emerald-600" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
          Responsive design
        </span>
        <span class="flex items-center gap-1">
          <svg class="w-4 h-4 text-emerald-600" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
          Instant results
        </span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const urlInput = ref('')

const handleSubmit = () => {
  if (urlInput.value) {
    console.log('Cloning URL:', urlInput.value)
    // Here would be the actual cloning logic
  }
}

const setExample = (url: string) => {
  urlInput.value = url
}
</script>
